import { Component, OnInit, ElementRef } from "@angular/core";
import {
  trigger,
  state,
  style,
  animate,
  transition
} from "@angular/animations";
import { InterfaceService } from "src/app/services/interface.service";
@Component({
  selector: "app-release-task",
  templateUrl: "./release-task.component.html",
  styleUrls: ["./release-task.component.css"],
  animations: [
    trigger("myInsertRemoveTrigger", [
      transition(":enter", [
        style({
          opacity: 0,
          height: 0
        }),
        animate(
          "0.5s",
          style({
            opacity: 1,
            height: "470px"
          })
        )
      ]),
      transition(":leave", [
        style({
          opacity: 1
        }),
        animate(
          "0.5s",
          style({
            opacity: 0,
            height: 0
          })
        )
      ])
    ])
  ]
})
export class ReleaseTaskComponent implements OnInit {
  constructor(public elementRef: ElementRef, private ds: InterfaceService) { }
  data: any = {
    title: "",
    content: "",
    categories: "C001",
    publisher: "",
    submitter: "",
    time: "",
    issued: "",
    remark: "",
    dept: "",
    state: ""
  };
  publishName: any;
  category: any;
  person: any;
  pName: any = "";
  ngOnInit() { }
  change: boolean = false; //打开关闭状态
  container: any = null; //获取组件元素
  index: number = 0; //当前图标位置
  state: number = 0; //0为关闭 1为打开 2为缩小
  width: number = 700; //组件的宽度
  height: number = 470; //组件的高度
  hide: boolean = false; //组件放大缩小状态
  left: string = "50%";
  top: string = "50%";
  close() {
    this.change = false;
    this.hide = false;
    this.state = 0;
    this.top = "50%";
    this.left = "50%";
  }
  toSmall() {
    this.container = this.elementRef.nativeElement.querySelector(".container");
    this.small();
  }
  show(e) {
    if (this.state == 0) {
      this.index = e;
      this.change = true;
      this.hide = true;
      this.state = 1;
    } else if (this.state == 2) {
      this.hide = true;
      this.state = 1;
      setTimeout(() => {
        if (this.top == "50%") {
          this.container.style.transform = "translate(-50%,-50%)";
        }
        this.container.style.top = this.top;
        this.container.style.left = this.left;
        this.container.style.width = this.width + "px";
        this.container.style.height = this.height + "px";
      }, 100);
    }
    setTimeout(() => {
      this.drop();
    }, 200);

    this.publishName = JSON.parse(sessionStorage.getItem("USER"));
    this.pName = this.publishName.emp_no.code;
    this.ds.taskCategory().subscribe((res: any) => {
      console.log(res);
      if (res.code == 100) {
        this.category = res.data;
      }
    });

    this.ds.taskAttend().subscribe((res: any) => {
      console.log(res);
      if (res.code == 100) {
        this.person = res.data;
      }
    });
  }
  small() {
    this.state = 2;
    this.container.style.transition = "all 1s";
    this.container.style.width = 0;
    this.container.style.height = 0;
    this.container.style.transform = "translate(0,0)";
    this.container.style.top = document.body.clientHeight - 46 + "px";
    this.container.style.left = 72 + 42 * (1 + this.index) - 30 + "px";
    setTimeout(() => {
      this.hide = false;
    }, 1000);
  }

  drop() {
    this.container = this.elementRef.nativeElement.querySelector(".container");

    let self = this;

    this.container.addEventListener("dragstart", function (ev) {
      self.container.style.transition = "all 0s";
      self.container.style.transform = "translate(0,0)";
      if (!self.container.style.left) {
        let height = document.body.clientHeight / 2;
        let width = document.body.clientWidth / 2;
        self.container.style.left = width - 350 + "px";
        self.container.style.top = height - 235 - 50 + "px";
      }
      this.left = self.container.style.left.substring(
        0,
        self.container.style.left.length - 2
      );
      this.top = self.container.style.top.substring(
        0,
        self.container.style.top.length - 2
      );
      this.left = ev.clientX - this.left;
      this.top = ev.clientY - this.top;
      var img = new Image();
      img.src =
        "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E";
      ev.dataTransfer.setDragImage(img, 0, 0);
    });
    this.container.addEventListener("drag", function (e) {
      self.container.style.transition = "all 0s";
      self.container.style.left = e.pageX - this.left + "px";
      self.container.style.top = e.pageY - this.top + "px";
    });
    this.container.addEventListener("dragend", function (e) {
      self.container.style.transform = "translate(0,0)";
      self.container.style.left = e.pageX - this.left + "px";
      self.container.style.top = e.pageY - this.top + "px";
      self.left = self.container.style.left;
      self.top = self.container.style.top;
    });
  }

  release(): void {
    this.ds
      .releaseTask(
        this.data.title,
        this.data.content,
        this.data.categories,
        this.pName,
        this.data.submitter,
        this.data.time,
        this.data.issued,
        this.data.remark
      )
      .subscribe((res: any) => {
        console.log(res);
        if (res.code == 100) {
        }
      });
  }
}
